<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Login_vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
    	.div1{
    		height: 400px; 
    		width: 350px;
    		background-color: rgba(255,255,255,0.5)
    		/*background-color: white*/

    	}
    	.div2{
    		width: 300px;
    	}
    	body{
			background-image: url(star.jpg);
			background-size: 100% 100%;
			background-attachment: fixed;
		}
		.btn1{
			width: 300px;
		}
		h4{
			font-weight: bold;
		}
		.p1{
			font-size: 10px;
			color: red
		}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<div id="myLogin">
		<center>
			<br><br><br>
			<div class="div1">
			<br><br>
			<h4>欢迎登录</h4>
			<br><br>
			<div class="div2">
				<div class="input-group">
					<span class="input-group-addon" id="userName">用户名</span>
					<input type="text" v-model="userName" placeholder="请输入用户名" class="form-control">				
				</div>
					<br>
					<p class="p1">{{message1}}</p><!-- <p class="p1">{{message2}}</p> -->
					<br>
				<div class="input-group">
					<span class="input-group-addon" id="passWord">密码</span>
					<input type="password" v-model="passWord" placeholder="请输入密码" class="form-control">
				</div>
				<br>
				<p class="p1">{{message2}}</p>
					<!-- <p>{{message2}}</p> -->
				<br><br>
				<button v-on:click="loog" class="btn btn-success btn1">登录</button>
			</div>  
			</div>
		</center>
		
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#myLogin',
			data:{
				userName: '',
				passWord: '',
				/*email: '/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/',*/
				message1: '',
				message2: ''
				/*message3: ''*/
			},
			watch:{
				userName: function(newInput, oldInput){
					//console.log("email ddd！")
					this.message1 = null
					var email = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/  //正则表达式不能用引号括起来！
					if (!email.test(this.userName)) {
					/*if (!userName.test(this.email1)) {	*/
				// if (!this.userName.test(email1)) {
					//console.log("email/////！")
						/*alert('请输入邮箱！')*/
						this.message1 = '请输入正确格式的邮箱！'
					}else{
						this.message1 = null
					}
					
				},
				passWord: function(newInput, oldInput){
					this.message3 = null
					if (this.passWord == '' || this.passWord == null) {
						this.message2 = "密码不能为空！"
						/*alert('密码不能为空！')*/
						console.log("密码不能为空！")
					}else{
						this.message2 = null
					}
				}
			},
			methods: {
				loog: function(){
					
				//console.log(this.passWord)

				$.ajax({
					type: "get",
					dataType: "json",//预期服务器返回的数据类型
		                url: "LoginSuccess.json" ,//提交数据到LoginSuccess.json，这里用LoginSuccess.json模拟服务器端
		                /*data: $('#form1').serialize(),*/
		                //data: this.passWord.serialize(),
		                success: function (result) { //参数名可以随意起，这里为result
		                    console.log(result);//控制台显示服务端（LoginSuccess.json）返回的数据(调试用)，，result是json文件返回的结果
		                     if (result.result == true) {
		                    // if (result == 123) {
		                        // alert("SUCCESS");
								alert("登录成功！");
		                        window.location='LoginSuccess.html'
		                    }
		                    ;
		                },
		                error : function() {
		                    alert("异常！");
		                }

				})


					// if (this.userName == ''|| this.userName == null) {
					// 	/*this.message1 = "用户名不能为空！"*/
					// 	alert('用户名不能为空！')
					// 	console.log("用户名不能为空！")
					// }else if (this.passWord == '' || this.passWord == null) {
					// 	alert('密码不能为空！')
					// 	console.log("密码不能为空！")
					// }else if (this.passWord == "123") {
					// 	alert('登录成功！')
					// 	window.location.href = 'LoginSuccess.html'
					// }else{
					// 	alert('密码错误！')
					// }
				}
			}
		})

		
	</script>
</body>
</html>